<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">User Interface</a>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Datatable
                </h2>
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">

        <div class="max-w-3xl prose prose-sm">

            <p>
                Since Fuse uses Angular Material, it's also possible to use their Table component. It offers base features like filtering, sorting and pagination as well as
                some advanced ones like column re-ordering, column and row freezing and expandable rows.
            </p>

            <h2>Examples</h2>
            <p>
                To keep this page simple and the Demo app as light as possible, we didn't add any examples here. Examples already can be found throughout the Demo app and also the
                official Angular Material documentation has plenty of examples to get you started.
            </p>

            <h2>Official docs</h2>
            <p>
                Angular Material Table examples and API documentation:
                <a
                    class="link"
                    href="https://material.angular.io/components/table/overview"
                    rel="noreferrer"
                    target="_blank">https://material.angular.io/components/table/overview
                </a>
            </p>

        </div>

    </div>

</div>
